<template>
  <el-drawer v-model="isDrawer" :title="propsValue.title">
    <div w-full h-full flex-col flex justify-between>
      <el-form :model="propsValue.row" label-width="auto">
        <el-form-item label="用户名">
          <el-input v-model="propsValue.row.nickName" />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="propsValue.row.acc" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="propsValue.row.pwd" />
        </el-form-item>
        <el-form-item label="权限">
          <el-select v-model="propsValue.row.role" size="large">
            <el-option label="admin" value="admin" />
            <el-option label="user" value="user" />
          </el-select>
        </el-form-item>
      </el-form>
      <div w-full flex justify-end>
        <el-button type="primary" @click="submitBtn">提交</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from "vue";
const isDrawer = ref(false);

interface Props {
  title: string;
  isView: boolean;
  row: Partial<{
    nickName: string;
    acc: string;
    pwd: string;
    role: string;
    id: number;
  }>;
}
const propsValue = ref<Props>({
  title: "",
  isView: false,
  row: {}
});

//接受组件传参
const acceptParams = (params: Props) => {
  propsValue.value = params;
  isDrawer.value = true;
};
const emit = defineEmits(["submitBtn"]);
const submitBtn = () => {
  emit("submitBtn", propsValue.value.row);
  isDrawer.value = false;
};

defineExpose({ acceptParams });
</script>

<style lang="scss">
.el-drawer__title {
  font-size: 18px;
}
</style>
